<template>
  <div class="filter">
    <span class="title">筛选</span>

    <div class="radio" v-for="(item, index) in radios">
      <span class="circle" :class="{checked: index == currentIndex}" @click="cleClick(index)"></span>
      <span class="title">{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterRadio',
  data() {
    return {
      currentIndex: 0,
    };
  },
  props: {
    radios: {
      type: Array,
      default: [],
    },
  },
  methods: {
    cleClick(index) {
      this.currentIndex = index;
      this.$emit('cleTabClick', index);
    },
  },
};
</script>

<style scoped>
.filter {
  height: 20px;
  padding: 20px 30px;
  display: flex;
  font-size: 12px;
  color: #a8a8b3;
}
div {
  margin-left: 20px;
  color: #181e33;
}
.title {
  margin-top: 2px;
}
.circle {
  display: inline-block;
  height: 16px;
  width: 16px;
  border: 1px solid #a8a8b3;
  border-radius: 50%;
  vertical-align: bottom;
  margin-right: 8px;
}
.checked {
  border: 1px solid #3a8bff;
  background: url(/src/assets/image/CourseMain/checked.png) no-repeat center;
}
</style>